// Variables
//
// This files contains CSS variables accessible to all selectors

// Primer colors, see https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
// @import '~primer-support/lib/variables/color-system.scss'; // 

//
// -------- primer-support/lib/variables/color-system.scss -----------
// -------- Grays --------
$gray-000:        #fafbfc !default;
$gray-100:        #f6f8fa !default;
$gray-200:        #e1e4e8 !default;
$gray-300:        #d1d5da !default;
$gray-400:        #959da5 !default;
$gray-500:        #6a737d !default;
$gray-600:        #586069 !default;
$gray-700:        #444d56 !default;
$gray-800:        #2f363d !default;
$gray-900:        #24292e !default; // body font color

// -------- Blue --------
$blue-000:        #f1f8ff !default;
$blue-100:        #dbedff !default;
$blue-200:        #c8e1ff !default;
$blue-300:        #79b8ff !default;
$blue-400:        #2188ff !default;
$blue-500:        #0366d6 !default; // Default: Passes AA with #fff
$blue-600:        #005cc5 !default;
$blue-700:        #044289 !default;
$blue-800:        #032f62 !default;
$blue-900:        #05264c !default; // Passes with 1/2/300 blues

// -------- Green --------
$green-000:       #f0fff4 !default;
$green-100:       #dcffe4 !default;
$green-200:       #bef5cb !default;
$green-300:       #85e89d !default;
$green-400:       #34d058 !default;
$green-500:       #28a745 !default; // Default. passes AA Large
$green-600:       #22863a !default; // Text green, passes AA on #fff
$green-700:       #176f2c !default;
$green-800:       #165c26 !default;
$green-900:       #144620 !default;

// -------- Yellow --------
$yellow-000:      #fffdef !default;
$yellow-100:      #fffbdd !default;
$yellow-200:      #fff5b1 !default;
$yellow-300:      #ffea7f !default;
$yellow-400:      #ffdf5d !default;
$yellow-500:      #ffd33d !default;
$yellow-600:      #f9c513 !default;
$yellow-700:      #dbab09 !default;
$yellow-800:      #b08800 !default;
$yellow-900:      #735c0f !default;

// -------- Orange --------
$orange-000:      #fff8f2 !default;
$orange-100:      #ffebda !default;
$orange-200:      #ffd1ac !default;
$orange-300:      #ffab70 !default;
$orange-400:      #fb8532 !default;
$orange-500:      #f66a0a !default; // Default. passes AA Large with #fff
$orange-600:      #e36209 !default;
$orange-700:      #d15704 !default;
$orange-800:      #c24e00 !default;
$orange-900:      #a04100 !default;

// -------- Red --------
$red-000:         #ffeef0 !default;
$red-100:         #ffdce0 !default;
$red-200:         #fdaeb7 !default;
$red-300:         #f97583 !default;
$red-400:         #ea4a5a !default;
$red-500:         #d73a49 !default; // Default. passes AA
$red-600:         #cb2431 !default;
$red-700:         #b31d28 !default;
$red-800:         #9e1c23 !default;
$red-900:         #86181d !default;

// -------- Purple --------
$purple-000:      #f5f0ff !default;
$purple-100:      #e6dcfd !default;
$purple-200:      #d1bcf9 !default;
$purple-300:      #b392f0 !default;
$purple-400:      #8a63d2 !default;
$purple-500:      #6f42c1 !default; // passes AA with #fff
$purple-600:      #5a32a3 !default;
$purple-700:      #4c2889 !default;
$purple-800:      #3a1d6e !default;
$purple-900:      #29134e !default;

// -------- Fades --------
// Black based on same hue as $gray-900
$black: #1b1f23 !default;
$white: #fff !default;

$black-fade-15:      transparentize($black, 0.85) !default;
$black-fade-30:      transparentize($black, 0.7) !default;
$black-fade-50:      transparentize($black, 0.5) !default;
$black-fade-70:      transparentize($black, 0.3) !default;
$black-fade-85:      transparentize($black, 0.15) !default;

$white-fade-15:      transparentize($white, 0.85) !default;
$white-fade-30:      transparentize($white, 0.7) !default;
$white-fade-50:      transparentize($white, 0.5) !default;
$white-fade-70:      transparentize($white, 0.3) !default;
$white-fade-85:      transparentize($white, 0.15) !default;

// -------- Color System --------
$red:         $red-500 !default;
$purple:      $purple-500 !default;
$blue:        $blue-500 !default;
$green:       $green-500 !default;
$yellow:      $yellow-500 !default;
$orange:      $orange-500 !default;

$gray-dark:   $gray-900 !default;
$gray-light:  $gray-400 !default;
$gray:        $gray-500 !default;

// -------- primer-support/lib/variables/color-system.scss -----------




// Extracted as a SCSS variable so that we can define the --overlay-background-color
// on both the :root and the ::backdrop scope. The ::backdrop pseudo-element
// doesn't inherit :root, see
// https://bugs.chromium.org/p/chromium/issues/detail?id=594096
$overlay-background-color: rgba(0, 0, 0, 0.4);

:root {
  --color-new: #{$green};
  --color-deleted: #{$red};
  --color-modified: #{$yellow-700};
  --color-renamed: #{$blue};
  --color-conflicted: #{$orange};

  --text-color: #{$gray-900};
  --text-secondary-color: #{$gray-500};
  --background-color: #{$white};

  --button-height: 25px;

  --button-background: #{$blue};
  --button-border-radius: 6px;
  --button-hover-background: #{lighten($blue, 5%)};
  --button-text-color: #{$white};
  --button-focus-border-color: #{$blue-600};

  --link-button-color: #{$blue};
  --link-button-hover-color: #{$blue-600};

  --secondary-button-background: #{$gray-000};
  --secondary-button-hover-background: #{$white};
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: #{rgba($gray-200, 0.75)};
  --secondary-button-focus-border-color: #{$gray-300};

  /**
   * Color for icons that are placed on top of a colored backing
   * (like a circle badge icon)
   */
  --badge-icon-color: #{$white};

  // Typography
  //
  // Font, line-height, and color for body text, headings, and more.
  $emoji_fallback_fonts: 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-sans-serif: system-ui, sans-serif, #{$emoji_fallback_fonts};
  --font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace, #{$emoji_fallback_fonts};

  /**
   * Font weight to use for semibold text
   */
  --font-weight-semibold: 600;

  /**
   * Font weight to use for light text
   */
  --font-weight-light: 300;

  // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
  // When adding a new font-size variable, please update the fix-emoji-spacing.ts file.
  --font-size: 12px;
  --font-size-sm: 11px;
  --font-size-md: 14px;
  --font-size-lg: 28px;
  --font-size-xl: 32px;
  --font-size-xxl: 42px;

  /** Extra small font size, be very conservative with the use of this */
  --font-size-xs: 9px;

  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);

  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);

  // Box
  //
  // We use the term 'box' here to refer to a very high-level generic
  // component that fits many use cases. A 'box' might be a list item
  // or an item in a tab control header. It's up to each implementation
  // to decide what states to support (active selection, selection, etc).

  --box-background-color: var(--background-color);
  --box-alt-background-color: #{$gray-100};

  /**
   * Background color for skeleton or "loading" boxes
   */
  --box-skeleton-background-color: #{$gray-200};
  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);

  /**
   * Border color for boxes.
   */
  --box-border-color: #{$gray-200};
  --box-border-accent-color: #{$blue};

  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #ebeef1;

  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: #{$gray-900};

  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */

  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: #{$gray-900};

  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #{$gray-400};

  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #{$blue};

  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #{$white};

  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #{$gray-400};

  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling.
   */
  --box-overflow-shadow-background: #{linear-gradient(180deg, rgba($white, 0) 0%, rgba($white, 1) 90%, rgba($white, 1) 100%)};

  /**
   * Placeholder color for input boxes
   */
  --box-placeholder-color: #{$gray-500};

  /**
   * Author input (co-authors)
   */
  --co-author-tag-background-color: #{$blue-000};
  --co-author-tag-border-color: #{$blue-200};

  /**
   * The height of the title bar area on Win32 platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --win32-title-bar-height: 28px;
  --win32-title-bar-background-color: #{$gray-900};

  /**
   * The height of the title bar area on darwin platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --darwin-title-bar-height: 22px;

  --spacing: 10px;
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --spacing-quad: calc(var(--spacing) * 4);
  --spacing-quint: calc(var(--spacing) * 5);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-third: calc(var(--spacing) / 3);

  --border-radius: 6px;
  // When we use the regular border radius (6px) the outline
  // leaves a tiny gap in the corners so we drop down to a
  // similar value than Chrome's default outline border radius.
  --outlined-border-radius: 3px;
  --base-border: 1px solid var(--box-border-color);

  --shadow-color: rgba(71, 83, 95, 0.19);
  --base-box-shadow: 0 2px 7px var(--shadow-color);

  --toolbar-height: 50px;

  --toolbar-background-color: #{$gray-900};
  --toolbar-border-color: #{$gray-900};
  --toolbar-text-color: #{$white};
  --toolbar-text-secondary-color: #{$gray-300};

  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: black;
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);

  --toolbar-button-hover-color: #{$white};
  --toolbar-button-hover-background-color: #{$gray-800};
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);

  --toolbar-button-focus-background-color: #{$gray-800};

  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: var(--background-color);

  --toolbar-button-progress-color: #{$gray-800};
  --toolbar-button-focus-progress-color: #{$gray-700};
  --toolbar-button-hover-progress-color: #{$gray-700};
  --toolbar-dropdown-open-progress-color: #{$gray-200};

  /**
   * App menu bar colors (Windows/Linux only)
   */
  --app-menu-button-color: var(--toolbar-text-color);
  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
  --app-menu-button-active-color: var(--toolbar-button-active-color);
  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);
  --app-menu-pane-color: var(--text-color);
  --app-menu-pane-secondary-color: var(--text-secondary-color);
  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);
  --app-menu-divider-color: var(--box-border-color);

  /**
    * Background color for badges inside of toolbar buttons.
    * Examples of badges are the ahead/behind bubble in the
    * push/pull button and the PR badge in the branch drop
    * down button.
    */
  --toolbar-badge-background-color: #{$gray-600};
  --toolbar-badge-active-background-color: #{$gray-200};

  --tab-bar-height: 29px;
  --tab-bar-active-color: #{$blue};
  --tab-bar-background-color: #{$white};
  --tab-bar-hover-background-color: #{$gray-100};

  /** Count bubble colors when used inside of a tab bar item */
  --tab-bar-count-color: var(--text-color);
  --tab-bar-count-background-color: #{$gray-200};

  /**
    * Badge colors when used inside of list items.
    * Example of this is the change indicators inside
    * of the repository list.
    */
  --list-item-badge-color: #{$gray-800};
  --list-item-badge-background-color: #{$gray-200};
  --list-item-selected-badge-color: #{$gray-900};
  --list-item-selected-badge-background-color: #{$gray-300};
  --list-item-selected-active-badge-color: #{$gray-900};
  --list-item-selected-active-badge-background-color: #{$white};
  --list-item-hover-background-color: #{$gray-100};

  /** Win32 has custom scrol bars, see _scroll.scss */
  --win32-scroll-bar-size: 10px;

  /**
   * The z-index for popups. Nothing should be higher, but other z-indexes can
   * be defined in terms of it.
   *
   * 10 seems arbitrary (because it is) but we have to go that high because
   * codemirror is all over the place with their z-indexes and uses at least
   * 0-6.
   */
  --popup-z-index: 20;
  --popup-overlay-z-index: calc(var(--popup-z-index) - 1);
  --foldout-z-index: calc(var(--popup-z-index) - 2);
  --nudge-arrow-z-index: calc(var(--popup-z-index) - 3);
  /**
   * This is 7 to make sure it appears on top code mirror
   * but behind popups, overlays, and foldouts
   */
  --side-panel-z-index: calc(var(--popup-z-index) - 4);

  /**
   * Toast notifications are shown temporarily for things like the zoom
   * percentage changing or the app toggling between full screen and normal
   * window mode.
   */
  --toast-notification-color: #{$gray-000};
  --toast-notification-background-color: #{rgba($gray-900, 0.6)};

  --tip-box-background-color: #{rgba($blue-500, 0.06)};
  --tip-box-border-color: #{$blue-200};

  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #{$blue};

  /**
   * An alternative focus color to use when the background color of
   * the focused element is the same as the regular focus color.
   */
  --alt-focus-color: #{$blue-800};

  /**
   * Variables for form elements
   */
  --text-field-height: 25px;
  --text-field-focus-shadow-color: #{rgba($blue, 0.25)};

  /**
   * Blankslate actions, see `BlankslateAction` component.
   */
  --primary-suggested-action-background: #{$blue-000};
  --primary-suggested-action-border-color: #{$blue-200};
  --suggested-action-icon-color: #{$blue-400};

  /**
   * Diff view
   */

  --diff-line-padding-y: 2px;

  --diff-text-color: #{$gray-900};
  --diff-border-color: #{$gray-200};
  --diff-gutter-color: #{$gray-200};
  --diff-gutter-background-color: var(--background-color);

  --diff-line-number-color: #{$gray-700};
  --diff-line-number-column-width: 50px;

  --diff-selected-background-color: #{$blue-400};
  --diff-selected-border-color: #{$blue-600};
  --diff-selected-gutter-color: #{$blue-600};
  --diff-selected-text-color: var(--background-color);

  --diff-add-background-color: #{darken($green-000, 2%)};
  --diff-add-border-color: #{$green-300};
  --diff-add-gutter-color: #{$green-300};
  --diff-add-gutter-background-color: #{darken($green-100, 3%)};
  --diff-add-inner-background-color: #acf2bd;

  --diff-add-text-color: var(--diff-text-color);
  --diff-delete-background-color: #{$red-000};
  --diff-delete-border-color: #{$red-200};
  --diff-delete-gutter-color: #{$red-200};
  --diff-delete-gutter-background-color: #{$red-100};
  --diff-delete-inner-background-color: #fdb8c0;
  --diff-delete-text-color: var(--diff-text-color);

  --diff-hunk-background-color: #{$blue-000};
  --diff-hunk-border-color: #{$blue-200};
  --diff-hunk-gutter-color: #{darken($blue-200, 5%)};
  --diff-hunk-gutter-background-color: #{$blue-100};
  --diff-hunk-text-color: #{$gray};

  --diff-hover-background-color: #{$blue-300};
  --diff-hover-border-color: #{$blue-400};
  --diff-hover-gutter-color: #{$blue-400};
  --diff-hover-text-color: var(--background-color);

  --diff-add-hover-background-color: #{$green-300};
  --diff-add-hover-border-color: #{$green-400};
  --diff-add-hover-gutter-color: #{$green-400};
  --diff-add-hover-text-color: var(--text-color);

  --diff-delete-hover-background-color: #{$red-200};
  --diff-delete-hover-border-color: #{$red-300};
  --diff-delete-hover-gutter-color: #{$red-300};
  --diff-delete-hover-text-color: var(--text-color);

  --diff-empty-row-background-color: #{$gray-000};
  --diff-empty-row-gutter-background-color: var(--diff-empty-row-background-color);

  // Syntax highlighting text colors
  --syntax-variable-color: #6f42c1;
  --syntax-alt-variable-color: #24292e;
  --syntax-keyword-color: #d73a49;
  --syntax-atom-color: #005cc5;
  --syntax-string-color: #032f62;
  --syntax-qualifier-color: #6f42c1;
  --syntax-type-color: #d73a49;
  --syntax-comment-color: #{$gray-500};
  --syntax-tag-color: #22863a;
  --syntax-attribute-color: #6f42c1;
  --syntax-link-color: #032f62;
  --syntax-header-color: #0000ff;

  // Note that this duration *must* match the `UndoCommitAnimationTimeout`
  // specified in `changes/index.tsx`.
  --undo-animation-duration: 500ms;

  // Colors for form errors
  --error-color: #{$red};
  --form-error-background: #{$red-100};
  --form-error-border-color: #{$red-200};
  --form-error-text-color: #{$red-800};

  /** Overlay is used as a background for both modals and foldouts */
  --overlay-background-color: #{$overlay-background-color};

  /** Dialog */
  --dialog-warning-color: #{$yellow-600};
  --dialog-error-color: #{$red};

  /** Inline paths and code */
  --path-segment-background: #{$blue-000};
  --path-segment-padding: var(--spacing-third);

  /** Diverging notification banner colors */
  --notification-banner-background: #{$blue-000};
  --notification-banner-border-color: #{$blue-200};
  --notification-ref-background: rgba(255, 255, 255, 0.75);

  // http://easings.net/#easeOutBack
  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  // http://easings.net/#easeInBack
  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);

  // http://easings.net/#easeOutQuint
  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

  /** rebase progress bar */
  --dialog-rebase-progress-background: #{$green};

  /** merge/rebase status indicators */
  --status-pending-color: #{$yellow-700};
  --status-error-color: #{$red-500};
  --status-success-color: #{$green-500};

  // PR status icon colors
  --pr-open-icon-color: #{$green-500};
  --pr-draft-icon-color: #{$gray-500};

  --call-to-action-bubble-border-color: #{$green};
  --call-to-action-bubble-color: #{$green};
}

::backdrop {
  --overlay-background-color: #{$overlay-background-color};
}
